<template>
    <div class="box-card">
        <div class="card-header">
            <span>算法导入</span>
        </div>
        <div class="box-content">
            <div class="system-block">
                <div class="system-block-item">
                    <!-- <div class="text">设备升级</div> -->
                    <el-input v-model="name" disabled style="width:360px;margin-right:20px"></el-input>
                    <el-upload class="upload-demo" :action="uploadFileUrl" accept=".tgz" ref="upload"
                        :on-preview="handlePreview" :on-remove="handleRemove" :before-remove="beforeRemove" :limit="1"
                        :on-exceed="handleExceed" :auto-upload="false" :show-file-list="false" :on-change="handleChange"
                        :on-success="handleSuccess" :before-upload="beforeUpload">
                        <el-button> <svg-icon icon="upload" />选择文件</el-button>
                    </el-upload>
                    <el-button type="primary" :disabled="!name" @click="submitUpload()"
                        style="margin-left:20px">上传</el-button>
                    <el-button plain type="primary" @click="clearFile">取 消</el-button>
                </div>
                <el-row :gutter="20" style="margin-top:10px">
                    <el-col :span="24"><el-alert title="提示：只支持.tgz格式文件!导入成功后，请重启应用程序！" type="error"
                            :closable="false"></el-alert></el-col>
                </el-row>
            </div>
        </div>
    </div>
    <div class="box-card mt15">
        <div class="card-header">
            <span>算法导出</span>
        </div>
        <div class="box-content">
            <el-button type="primary">导出</el-button>
        </div>
    </div>
    <div class="box-card mt15">
        <div class="card-header">
            <span>算法上报</span>
        </div>
        <div class="box-content">
            <el-button type="primary">上报</el-button>
        </div>
    </div>
</template>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, computed, nextTick } from 'vue'
import { ElMessage } from 'element-plus'
//获取路由对象
let $route = useRoute()
// 计算出当前路由名称
let curRouteName = computed(() => {
    return $route.matched[$route.matched.length - 1].meta.title
})

const name = ref('')
const upload = ref(null)
const uploadFileUrl = ref('system/update/file')

// 上传文件
function handleRemove(file: any, fileList: any) {
    // console.log(file, fileList)
}
function handlePreview(file) {
    console.log(file)
}
function handleExceed(files: any, fileList: any) {
    ElMessage.warning(
        `当前限制选择 1 个文件，本次选择了 ${files.length
        } 个文件，共选择了 ${files.length + fileList.length} 个文件`
    )
}
function beforeRemove(file, fileList) {
    // return this.$confirm(`确定移除 ${file.name}？`)
}
function handleChange(file, fileList) {
    // console.log(file, fileList)
    name.value = file.name
}
function handleSuccess(response, file, fileList) {
    console.log(response, file, fileList)
    if (response.code === 0) {
        ElMessage.success('上传成功!')
    } else {
        ElMessage.error('上传失败!')
    }
    clearFile()
}
function beforeUpload(file) {
    if (!isTgzdFile(file)) {
        ElMessage.error('只允许上传tgz格式的文件')
        return false
    }
    return true
}
function isTgzdFile(file) {
    const fileType = file.name.substring(file.name.lastIndexOf('.') + 1)
    return fileType.toLowerCase() === 'tgz'
}
// 上传
function submitUpload() {
    upload.value.submit()
}
// 取消
function clearFile() {
    nextTick(() => {
        upload.value.clearFiles()
        name.value = ''
    })
}


</script>
<style lang="scss" scoped>
.system-block {
    padding: 29px 0px;

    .system-block-item {
        display: flex;
        padding-left: 20px;
        align-items: center;

        .text {
            width: 150px;
            color: #666;
        }

        .checkbox {
            margin-left: 30px;
        }
    }
}
</style>